import { JSX } from 'react'
import style from "./index.module.scss"
const contactData = [
    {
        title: "集团总机",
        text: "028-61703753",
    },
    {
        title: "商务合作热线",
        text: "19181758809",
    },
    {
        title: "客户服务中心",
        text: "17302843053",
    },
    {
        title: "集团邮箱",
        text: "lsd@lishidagroup.com",
    },
    {
        title: "总部地址",
        text: "四川成都温江区海峡科技园双新路1029号",
    },
]

const linkData = [
    {
        title: "智慧城市",
        children: [
            {
                title: "物联网大数据平台"
            },
            {
                title: "智慧城市家具"
            },
            {
                title: "万物互联产品"
            },
            {
                title: "智慧城市解决方案"
            },
        ]
    },
    {
        title: "智慧照明",
        children: [
            {
                title: "智慧路灯"
            },
            {
                title: "多杆合一路灯"
            },
            {
                title: "户外智慧照明"
            },
            {
                title: "室内智能照明"
            },
            {
                title: "夜游亮化"
            },
        ]
    },
    {
        title: "解决方案",
        children: [
            {
                title: "智慧水务"
            },
            {
                title: "智慧环卫"
            },
            {
                title: "智慧园林"
            },
            {
                title: "智慧停车"
            },
            {
                title: "智慧交通"
            },
            {
                title: "智慧市政"
            },
        ]
    },
    {
        title: "市政工程",
        children: [
            {
                title: "市政公用工程"
            },
            {
                title: "建筑工程施工"
            },
            {
                title: "城市及道路照明工程"
            },
            {
                title: "建筑工程施工"
            },
            {
                title: "城市园林绿化工程"
            },
            {
                title: "机电工程"
            },
            {
                title: "电子与智能化工程"
            },
            {
                title: "钢结构工程"
            },
            {
                title: "消防设施工程"
            },
            {
                title: "环保工程"
            },
            {
                title: "建筑装修装饰工程"
            },
        ]
    },
    {
        title: "集团案例",
        children: [
            {
                title: "夜游亮化"
            },
            {
                title: "智慧照明"
            },
            {
                title: "市政工程"
            },
        ]
    },
    {
        title: "新闻动态",
        children: [
            {
                title: "集团热点"
            },
            {
                title: "项目新闻"
            },
        ]
    },
    {
        title: "关于我们",
        children: [
            {
                title: "集团简介"
            },
            {
                title: "荣誉资质"
            },
            {
                title: "企业文化"
            },
        ]
    },
    {
        title: "招贤纳士",
        children: []
    },
]
function generContactEle() {
    return contactData.map((content, index) => {
        return (
            <div className={`contact-box mb-[15px] ${index === 4 ? "mb-0!" : ''}`} key={content.title}>
                <div className='text-[14px] bg-[#d9f1ff] w-[100px] indent-[10px] py-1'>{content.title}</div>
                <span className='text-[18px] flex my-2'>{content.text}</span>
                <div className='line w-full h-[2px] bg-black'></div>
            </div>
        )
    })
}

function generLinkEle() {
    let ele: JSX.Element;
    return linkData.map(link => {
        if (link.children && link.children.length !== 0) {
            ele = <ul>
                {link.children.map((linkChild, index) => {
                    return (
                        <li key={index} className={`mb-3.5 text-[14px] cursor-pointer ${index === link.children.length - 1 ? 'mb-0!' : ''}`}>{linkChild.title}</li>
                    )
                })}
            </ul>
        } else {
            ele = <></>
        }
        return (
            <div className={`link-box mb-10 sm:w-[50%] lg:mb-0 lg:w-auto`} key={link.title}>
                <h2 className='mb-9 font-bold text-[18px] cursor-pointer'>{link.title}</h2>
                {ele}
            </div>
        )
    })
}
type Props = {
    className?: string
}
export default function Footer(props: Props) {
    const { className } = props
    return (
        <div className={`${style.footer} footer flex items-center py-[80px]${className ? " " + className : ""}`}>
            <div className={`container mx-auto lg:flex`}>
                <div className={`contact mb-20 lg:mr-[100px] lg:mb-0`}>
                    <h2 className='text-[44px] font-bold mb-[100px] relative tracking-wide'>
                        <span className='relative z-10'>联系我们</span>
                        <img src="/src/assets/home/footer-contact-us.png" className='absolute top-[-15px] left-[-70px]' alt="" />
                    </h2>
                    {generContactEle()}
                </div>
                <div className={`link sm:flex sm:flex-wrap lg:flex lg:flex-nowrap lg:flex-1 lg:justify-between relative`}>
                    {generLinkEle()}
                    <img src="/src/assets/home/qr-code.png" alt="" className='absolute bottom-0 right-0 h-[150px]' />
                </div>
            </div>
        </div >
    )
}
